import Vue from 'vue'
import VueRouter from 'vue-router'
// import login from '@/views/login'
// import layout from '@/views/layout'
// import notfound from '@/views/notfound'
// import welcome from '@/views/layout/welcome'
// import chart from '@/views/layout/chart'
// import user from '@/views/layout/user'
// import enterprise from '@/views/layout/enterprise'
// import question from '@/views/layout/question'
// import subject from '@/views/layout/subject'
import { getToken } from '../utils/token'

// 插槽
// import parent from '@/test/slot/parent' // 默认插槽
// import parent from '@/test/name-slot/parent' // 具名插槽
import parent from '@/test/scope-slot/parent' // 作用域插槽

// 路由懒加载
const login = () => import('../views/login')
const layout = () => import('@/views/layout')
const welcome = () => import('@/views/layout/welcome')
const chart = () => import('@/views/layout/chart')
const user = () => import('@/views/layout/user')
const enterprise = () => import('@/views/layout/enterprise')
const question = () => import('@/views/layout/question')
const subject = () => import('@/views/layout/subject')
const notfound = () => import('@/views/notfound')

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: login,
    meta: { title: '登录' }
  },
  {
    path: '/layout',
    name: 'layout',
    component: layout,
    // 默认选中user
    // redirect: '/layout/user',
    meta: {
      title: '后台管理',
      roles: ['超级管理员', '管理员', '老师', '学生']
    },
    // 嵌套路由
    children: [
      // 如果只有一级 path不要写 / ,如果非得写 / 那就写全(/layout/chart)覆盖
      {
        path: 'welcome',
        component: welcome,
        // meta:路由元信息，我们可以如下理解，就是给我们每个路径设置一些额外的数据
        meta: {
          /*
            fullPath,icon,title是为了生成左边的每一个菜单项 el-menu-item
          */
          fullPath: '/layout/welcome', // 点击之后，跳转的路径
          icon: 'el-icon-s-home', // 菜单项的icon
          title: '欢迎页面', // 菜单项的名字
          roles: ['超级管理员', '管理员', '老师', '学生'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: 'chart',
        component: chart,
        meta: {
          fullPath: '/layout/chart',
          icon: 'el-icon-pie-chart',
          title: '数据预览',
          roles: ['超级管理员', '管理员', '老师']
        }
      },
      {
        path: 'user',
        component: user,
        meta: {
          fullPath: '/layout/user',
          icon: 'el-icon-user',
          title: '用户列表',
          roles: ['超级管理员', '管理员', '老师']
        }
      },
      {
        path: 'enterprise',
        component: enterprise,
        meta: {
          fullPath: '/layout/enterprise',
          icon: 'el-icon-office-building',
          title: '企业列表',
          roles: ['超级管理员', '管理员', '老师']
        }
      },
      {
        path: 'question',
        component: question,
        meta: {
          fullPath: '/layout/question',
          icon: 'el-icon-edit-outline',
          title: '题库列表',
          roles: ['超级管理员', '管理员', '老师', '学生']
        }
      },
      {
        path: 'subject',
        component: subject,
        meta: {
          fullPath: '/layout/subject',
          icon: 'el-icon-notebook-2',
          title: '学科列表',
          roles: ['超级管理员', '管理员', '老师']
        }
      }
    ]
  },
  // 重定向
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/slot',
    component: parent
  },
  // 404
  {
    path: '*',
    component: notfound
  }
]

const router = new VueRouter({
  routes
})

// 导航守卫(前置守卫)
/*
  每次路由跳转都会执行这里
  to:去哪里
  from:从哪里来
  next:进行控制，如果不接参数，就是直接通过，如果接了参数，就代表跳转到哪里去
*/
const whiteList = ['/login']
router.beforeEach((to, from, next) => {
  // 在白名单中的路径，直接过
  if (whiteList.includes(to.path)) {
    next()
  } else {
    const token = getToken()
    if (token) {
      next()
    } else {
      next('/login')
    }
  }
})

// 后置守卫
router.afterEach((to, from) => {
  // console.log(to)
  // console.log(from)
  document.title = to.meta.title || '黑马面面'
})

export default router
